<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            color: red;
            font-size: 30px;
            text-align: center;
            margin-top: 150px;
        }
    </style>
</head>
<body>
    <h1 id="count">距离活动还有02天08小时20分30秒</h1>

    <script>
        let h1 = document.querySelector("#count");
        let day;
        let hour;
        let minute;
        let second;

        function countdown(d,h,m,s){
            day=d;
            hour=h;
            minute=m;
            second=s;
        }
        countdown(2,8,20,30);

        st = setInterval(()=>{
            if(second > 0){
                second--;
            }else if(minute > 0){
                minute--;
                second = 59;
            }else if(hour > 0){
                hour--;
                minute=59;
                second=59;
            }else if(day > 0){
                day--;
                hour = 23;
                minute=59;
                second=59;
            }else{
                clearInterval(st);
            }
            h1.innerHTML = `距离活动还有${formatTime(day)}天${formatTime(hour)}小时${formatTime(minute)}分${formatTime(second)}秒`;
        }, 1000);

        function formatTime(unit) {
            return unit < 10 ? `0${unit}` : unit;  // 格式化
        }
    </script>
</body>
</html>